// 读取文件的时候是通过commonJS的方式读取的, 所以通过commonJS的方式导出
const path = require("path");
console.log(__dirname); // 当前的绝对路径
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 用来匹配资源 使用正则表达式   js中匹配到css文件的时候
                // loader: "css-loader"  简写                      // {loader: "css-loader"}   最完整的写法
                use: [
                    // {
                    //     loader: "css-loader"
                    // }
                    // loader的处理顺序是从下往上处理的，从后往前进行处理的
                    "style-loader", // 通过业内样式的方式进行引入的
                    // "css-loader", // 是上面内容的简写
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1 // 如果遇到了@import,会回过头去让postCss-loader进行处理的
                        }
                    },
                    // {
                    //     loader: "postcss-loader",
                    //     options: {
                    //         // 这部分内容是根据编写的loader决定的
                    //         postcssOptions: {
                    //             plugins: [
                    //                 // 依赖多个插件
                    //                 // require("autoprefixer"),
                    //                 // require("postcss-preset-env")
                    //                 "postcss-preset-env" // 等同于requrie的写法,简写
                    //             ]
                    //         }
                    //     }
                    // }
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    // "css-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,  // 被前面处理过的loader再次进行处理一次
                        }
                    },
                    "postcss-loader",
                    "less-loader"
                ]
            }
        ]
    }
};
